<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网上营业厅</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../layui/css/layui.css" media="all">

<link rel="icon" href="images/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<link rel="bookmark" href="images/favicon.ico" type="image/x-icon" />


<script type="text/javascript" src="../layui/lay/modules/layer.js"></script>
<script src="../layui/jquery-3.2.1.min.js" charset="utf-8"></script>
<script src="../layui/layui.js" charset="utf-8"></script>
</head>
<style type="text/css">     
    .mask {       
            position: absolute; top: 0px; filter: alpha(opacity=60); 
            z-index: 1002; left: 0px;              
			background:url(/wsyyt/layui/layui/img/jz.gif) no-repeat center rgba(0,0,0,0.5) ;
		  	background-size:30px 30px;
			background-repeat: no-repeat;
			background: 
        }     
</style>   
<style>
	body{
		background-size:100%,100%;
		overflow:hidden;
	}
		body{
		background-size:100%,100%;
		overflow:hidden;
	}
	.vali_pass {
  width: 350px;
  margin: 0 auto;
  padding: 10px;
  border: #eee 1px solid;
  text-align: center;
}
.vali_pass input {
  width: 96%;
  display: block;
  margin: 0;
  padding: 5px;
  font-size: 14px;
  line-height: 20px;
}
.vali_pass_progress {
  margin-top: 10px;
  background-color: #efefef;
  height: 10px;
  border-radius: 5px;
}
.vali_pass_inner_progress {
  display: block;
  height: 100%;
  background-color: transparent;
  border-radius: 5px;
  width: 100%;
}
.error {
 background-color: #ff3300;
}
.middle {
 background-color: gold;
}
.strong {
 background-color: green;
}
.baise {
 background-color: #FFFFFF;
}  
</style>

<body background="../images/login.png">
<div align="center" id="mask" class="mask"></div>   
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<div align="center">
		<div id="left">
		<div align="center" class="layui-tab layui-tab-card " style="width: 40%;height: 40%">
			<ul class="layui-tab-title">
				<li><font size="3">请仔细填写注册信息</font></li>
			</ul>
			<div class="layui-tab-content">
				<div class="layui-tab-item layui-show">
			  <form id="form" class="layui-form" action="">
			    
					<label class="layui-form-label">身份证号码 : </label>
					<div class="layui-input-inline" style="width: 75%">
						<input name="sfzh" id="sfzh" class="layui-input" type="text"autocomplete="off" lay-verify="required|number">
					</div>
					
					<br> <br> 
					<label class="layui-form-label">公积金账号 : </label>
					<div class="layui-input-inline" style="width: 75%">
						<input name="gjjzh" id="gjjzh" class="layui-input" type="text"autocomplete="off" lay-verify="required|number">
					</div>
					<br> <br> 
					<label class="layui-form-label">预留手机号 : </label>
					<div class="layui-input-inline" style="width: 75%">
						<input name="ylsjh" id="ylsjh" class="layui-input" type="text"autocomplete="off" lay-verify="required|number">
					</div>
					
					<br>
					<br>
					<label class="layui-form-label">短信验证码 : </label>
					<div class="layui-input-inline" style="width: 53%">
						<input name="dxyz" id="dxyz" class="layui-input" type="text"autocomplete="off" lay-verify="required|number">
					</div>
					
					<div class="layui-input-inline">
						<input type="button" class="layui-btn layui-btn-primary" onclick="settime(this);fs()"  value="发送验证码">
					</div>
					<br> <br> 
					<label class="layui-form-label">您的密码 : </label>
					<div class="layui-input-inline" style="width: 53%">
						<input name="password"  onKeyUp="pwStrength(this.value)" onBlur="pwStrength(this.value)" id="password" class="layui-input" type="password"autocomplete="off" lay-verify="required|number">
					</div>
					<div class="layui-input-inline">
					<table width="100%" height="22" style='display:inline'>  
					<tr align="center">  
					<td width="33%" id="strength_L" style="font-size:18px;">弱&nbsp;&nbsp;</td>  
					<td width="33%" id="strength_M" style="font-size:18px;">中&nbsp;&nbsp;</td>  
					<td width="33%" id="strength_H" style="font-size:18px;">强&nbsp;&nbsp;</td>  
					</tr>  
					</table>  
					</div>
					<br> <br> 
					<label class="layui-form-label">确认密码 : </label>
					<div class="layui-input-inline" style="width: 75%">
						<input name="qpassword" id="qpassword" class="layui-input" type="password"autocomplete="off" lay-verify="required|number">
					</div>
					
					
					<br>
					<br>
					</form>
					<div align="center">
					 	<input name="ck" value="ck" id="ck"  type="checkbox" style="disabled:disabled"><font size="3" color="red">我同意并遵守
					 	</font><a href="javascript:;" id="wsyytxy" style="font-size: 1.2em; color: blue">《延边州住房公积金个人网上业务平台服务协议》</a><br>
					 	<a id="submit" class="layui-btn layui-btn-primary">注 &nbsp;&nbsp; 册 </a>
					 	<input id="cz" type="button" class="layui-btn layui-btn-primary" value="返回登录界面">
					</div>
				</div>
			</div>
		</div>
	</div>
  </div>
  
	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
	<script>
		layui.use('element', function() {
			var $ = layui.jquery, element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
		});
	</script>
	<script type="text/javascript">
	 $("#ck").attr("checked","checked");
	function getPath() {  	     
	        return 'http://'+location.host;
	}
	  function CharMode(iN){  
if (iN>=48 && iN <=57) //数字  
return 1;  
if (iN>=65 && iN <=90) //大写  
return 2;  
if (iN>=97 && iN <=122) //小写  
return 4;  
else  
return 8;   
}  
//bitTotal函数  
//计算密码模式  
function bitTotal(num){  
modes=0;  
for (i=0;i<4;i++){  
if (num & 1) modes++;  
num>>>=1;  
}  
return modes;  
}  
//返回强度级别  
function checkStrong(sPW){  
if (sPW.length<=4)  
return 0; //密码太短  
Modes=0;  
for (i=0;i<sPW.length;i++){  
//密码模式  
Modes|=CharMode(sPW.charCodeAt(i));  
}  
return bitTotal(Modes);  
}  
//显示颜色  
function pwStrength(pwd){  
O_color="#eeeeee";  
L_color="#FF0000";  
M_color="#FF9900";  
H_color="#33CC00";  
if (pwd==null||pwd==''){  
Lcolor=Mcolor=Hcolor=O_color;  
}  
else{  
S_level=checkStrong(pwd);  
switch(S_level) {  
		case 0: 
		Lcolor=Mcolor=Hcolor=O_color;  
		case 1: 
		Lcolor=L_color;  
		Mcolor=Hcolor=O_color;  
		break;  
		case 2: 
		Lcolor=Mcolor=M_color;  
		Hcolor=O_color;  
		break;  
		default:  
		
		Lcolor=Mcolor=Hcolor=H_color;  
	}  
}  
document.getElementById("strength_L").style.background=Lcolor;  
document.getElementById("strength_M").style.background=Mcolor;  
document.getElementById("strength_H").style.background=Hcolor;  
return;  
}  
	</script>
    <script type="text/javascript" src="../layui/lay/modules/layer.js"></script>
	<script type="text/javascript" src="../layui/layer.ext.js"></script>
      <script type="text/javascript">
     	function s(){     
        $("#mask").css("height",$(document).height());     
        $("#mask").css("width",$(document).width());     
        $("#mask").show();     
	    }  
	    //隐藏遮罩层  
	    function h(){     
	          
	        $("#mask").hide();     
	    }  
    	  $("#submit").click(function(){
        	  var a=$("#sfzh").val();
        	  var b=$("#gjjzh").val();
        	  var c=$("#ylsjh").val();
        	  var d=$("#dxyz").val();
        	  var e=$('input:checked[name="ck"]:checked').val();
        	  var xp=$("#password").val();
        	  var jp=$("#qpassword").val();
            
        		  if(a=="" || a==null){
        			   layer.alert("身份证不能为空！");  
        		  }else if(a.length!=18){
				  	   layer.alert("身份证号违法请重新输入！");        		  
        		  }
        		   else if(b=="" || b==null){
        			   layer.alert("公积金账号不能为空！");       		  
        		  }else if(b.length!=12 ){
        		  		layer.alert("公积金账号输入不合法!");
        		  }else if(c=="" || c==null){
        			   layer.alert("预留手机号不能为空！");     		  
        		  }else if(c.length !=11){
        		  		layer.alert("手机号不合法!"); 
        		  }
        		   else if(d=="" || d==null){
        			   layer.alert("短信验证码不能为空！");     		  
        		  }
        		   else if(xp!=jp){
        			   layer.alert("两次密码输入不一致！");     		  
        		  }
        		   else if(jp==""||jp==null){
        			   layer.alert("确认密码不能为空！");     		  
        		  }
        		   else if(xp=="" || xp==null){
        			   layer.alert("密码不能为空！");     		  
        		  }else if(e==null || e==""){
               		 layer.alert("您还没同意延边州住房公积金个人网上业务平台服务协议!");
               	  }else if(xp.length < 6){
               	  	   layer.alert("密码不能小于6位！");
               	  }else if(!/([a-zA-Z]+[0-9]+|[0-9]+[a-zA-Z])/.exec(xp)){
				       layer.alert("密码输入错误，密码由字符和数字组成！");
               	  }else if(c.length < 11 && c.length > 11){
               	  	   layer.alert("请填写正确的手机号码！"); 
        		  }else if(a!="" && b!="" && c!="" && d!="" && (e!="" || e!=null) && xp==jp && xp.length > 5){
        		  settime(this);
        		   s();
						$.ajax({
							url : getPath()+'/wsyyt/zccontroller/test',
							method : 'post',
							dataType : 'JSON',
							data: {'sfzh':a,'gjjzh':b,'ylsjh':c,'dxyz':d,'password':xp},
							success : function(result) {
								var code = result.code;
								h();
								if(code==0){
									
									layer.alert('注册成功', {
								      skin: 'layui-layer-molv' //样式类名  自定义样式
								     ,closeBtn: 1    // 是否显示关闭按钮
								      ,anim: 1 //动画类型
								      ,btn: ['确认','取消'] //按钮
								      ,icon: 6    // icon
								      ,yes:function(){
								         window.location.href =getPath()+'/wsyyt/login/login.html';
								      }
								     ,btn2:function(){
								         window.location.href =getPath()+'/wsyyt/login/login.html';
								     }});	
								}else{		
									layer.alert(result.CW, {
								      skin: 'layui-layer-molv' //样式类名  自定义样式
								     ,closeBtn: 1    // 是否显示关闭按钮
								      ,anim: 1 //动画类型
								      ,btn: ['确认'] //按钮
								      ,icon: 5    // icon
								      
								     ,btn2:function(){
								         window.location.href =getPath()+'/wsyyt/login/zc.html';
								     }});	
								}
							}
					});		
			};
	});  
    	 function fs(){
	        	  var a=$("#sfzh").val();
	        	  var b=$("#gjjzh").val();
	        	  var c=$("#ylsjh").val();
	            
        		  if(a=="" || a==null){
        			   layer.alert("身份证不能为空！");  
        		  }else if(a.length!=18){
				  	   layer.alert("身份证号违法请重新输入！");     
        		  }else if(b.length!=12 ){
        		  		layer.alert("公积金账号输入不合法！");
        		  }else if(b=="" || b==null){
        			   layer.alert("公积金账号不能为空！");       		  
        		  }else if(c=="" || c==null){
        			   layer.alert("预留手机号不能为空！");  
        		  }else if(c.length !=11){
        			   layer.alert("请输入正确的手机号！");  
        		   		  
        		  }else if(a!="" && b!="" && c!=""  && c.length==11){
        		  s();
						$.ajax({
							url : getPath()+'/wsyyt/zccontroller/grdx',
							method : 'post',
							dataType : 'JSON',
							data: {'sfzh':a,'gjjzh':b,'sjhm':c},
							success : function(result) {
								var code = result.code;
								h();
								if(code==0){
										layer.alert("短信验证码已发送至"+result.data[0].手机+"请注意查收！");
								}else{		
										layer.alert(result.CW);
								}
							}
					});		
			};
	};
	$("#cz").click(function(){
		window.location.href =getPath()+'/wsyyt/login/login.html';
	});
      </script>
      <script type="text/javascript"> 
			var countdown=60; 
			function settime(obj) { 
				 var a=$("#sfzh").val();
        	  var b=$("#gjjzh").val();
        	  var c=$("#ylsjh").val();
            
        		  if(a=="" || a==null){
        		  }else if(a.length!=18){
        		  }else if(b.length!=12 ){
        		  }else if(b=="" || b==null){
        		  }else if(c=="" || c==null){
        		  }else if(c.length !=11){
        		  }else if(a!="" && b!="" && c!=""  && c.length==11){
					    if (countdown == 0) { 
					        obj.removeAttribute("disabled");    
					        obj.value="发送短信验证码"; 
					        countdown = 60; 
					        return;
					    } else { 
					        obj.setAttribute("disabled", true); 
					        obj.value="重新发送(" + countdown + ")"; 
					        countdown--; 
					    } 
					    setTimeout(function() { 
					    settime(obj);}
					    ,1000);
				};
			
			};
	</script>
</body>
</html>